<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    /*
    1. 도서정보를 배열로 관리
    2. 도서정보를 생성자 함수(Book)로 정의
    3. 도서정보 출력(조회)는 getBookInfo method를 이용
    4. getBookInfo 메소드는 프로토타입에 추가
    */
</script>
</head>
<body>
<header>
    <h1>도서 정보 관리</h1><hr>
</header>
<section>
    <fieldset>
    <legend>도서정보 입력</legend>
    <table>
        <tr>
            <td><label for="title">도서명</label></td>
            <td><input type="text" id="title" required disabled="disabled"></td>
        </tr>
        <tr>
            <td><label for="writer">저 자</label></td>
            <td><input type="text" id="writer" required></td>
        </tr>
        <tr>
            <td><label for="price">가격</label></td>
            <td><input type="number" id="price" required></td>
        </tr>
        <tr>
            <td><label for="date">출판일</label></td>
            <td><input type="date" id="date" required></td>
        </tr>
        <tr>
            <td><label for="category">분야</label></td>
            <td>
                <select id="category">
                    <option value="소설">소설
                    <option value="인문">인문
                    <option value="경제">경제
                </select>
            </td>
        </tr>   
        <tr>
            <td colspan="2">
            <button> 도서 정보 추가</button>
            <button> 입력 취소</button>
            </td>
        </tr>   
    </table>    
    </fieldset> 
</section>
<section>
    <fieldset>
        <legend>정보 관리</legend>
        <label>제목<input type="text" id="searchTitle"></label>
        <button> 검 색 </button>
        <button> 수 정 </button>
        <button> 삭 제</button>
        <button> 전체 조회 </button>
    </fieldset>
</section>
<section>
    <h2>처리 결과</h2><hr>
    <!-- 
      처리 메세지
      1. 도서 정보 추가됨
      2. 도서 정보 없음
      3. "title" 도서 추가됨.
      4. "title" 도서 삭제됨.
      5. "title" 도서 검색됨.
      6. "title" 도서 수정됨 
      6.1 ----------- 변경 전-----------
                      도서 정보 출력
      6.2 ----------- 변경 후-----------
                      도서 정보 출력
     -->
</section>
</body>
</html>